// 基础地址
const BASE_URL = 'http://110.41.43.118:3008';

// 登录状态
const USERNAME = localStorage.getItem('username');
const TOKEN = localStorage.getItem('token');

// 获取元素
let oWelcomeContent = document.querySelector('.welcome-content');
let oSelfContent = document.querySelector('.self-content');
let oLogin = document.querySelector('.login');
let oRegister = document.querySelector('.register');

let oCartList = document.querySelector('.cart_list');
let oCartMsg = document.querySelector('.no-list');
let oCartBtn = document.querySelector('.cart-btn');

// 验证登录状态
(function() {

	// 封装交互状态
	function loginStatusRender(welStatus, exitStatus, txt) {
		oWelcomeContent.style.display = welStatus;
		oWelcomeContent.innerHTML = `
		<span class="welcome">欢迎, ${txt}</span>
		<div class="self-content">
			<a href="" class="self">个人设置</a>
			<a href="address.html" class="address-msg">收货信息</a>
			<a href="order.html" class="my">我的订单</a>
			<a href="javascript:;" class="exit">退出</a>
		</div>
		`;
		oLogin.style.display = exitStatus;
		oRegister.style.display = exitStatus;
	}

	if (USERNAME && TOKEN) {
		loginStatusRender('block', 'none', USERNAME)

		// 调用获取购物车的数据方法
		getCartValue();
	} else {
		loginStatusRender('none', 'block', USERNAME);
	};

	let oExit = document.querySelector('.exit');
	// 点击退出
	oExit.onclick = function() {
		// 清除本地存储
		localStorage.removeItem('username');
		localStorage.removeItem('token');

		loginStatusRender('none', 'block', '');

		// 显示暂无购物车
		oCartMsg.style.display = 'block';
		oCartList.style.display = 'none';
		// 交互文本
		oCartBtn.innerHTML = '快去抢购良仓商品吧!';
		oCartBtn.onclick = null;
	};

	// 点击登录按钮
	oLogin.onclick = function() {
		let goodsId = yzb.getUrlValue('goodsId');
		let catId = yzb.getUrlValue('catId');
		// 带参数的跳转
		location.href = goodsId ? `login.html?goodsId=${goodsId}&catId=${catId}` : 'login.html';
	};

})();

// 封装购物车方法
function getCartValue() {

	// 交互文本
	oCartBtn.innerHTML = '查看购物车';
	oCartBtn.onclick = function() {
		location.href = 'shopcart.html';
	};

	yzb.ajax({
		method: 'post',
		url: BASE_URL + '/api_cart',
		data: {
			userId: TOKEN,
			status: 'viewcart'
		},
		success(res) {
			if (res.code != 0) {
				console.log(res);
				return;
			};

			// 购物车验证
			let cartCount = res.data.length;
			if (cartCount == 0) {
				// 显示暂无购物车
				oCartMsg.style.display = 'block';
				oCartList.style.display = 'none';
				return;
			};

			// 显示购物车有商品
			oCartMsg.style.display = 'none';
			oCartList.style.display = 'block';

			// 组装dom
			let str = '';
			res.data.forEach(item => {
				str += `
					<li class="list">
									<a href="goods.html?goodsId=${item.goods_id}&catId=${item.cat_id}"><img src="${item.goods_thumb}" /></a>
									<div>
										<p>${item.goods_name}</p>
										<p>服装尺码:S;颜色:米白/黑;</p>
										<p>
											<span>数量：${item.goods_number}件</span>
											<span>¥${(item.price * 0.9).toFixed(2)}</span>
											<span>¥${item.price}</span>
										</p>
									</div>
								</li>
					`;
			});
			// 添加到页面
			oCartList.innerHTML = str;
		}
	})
};


// 数据
const CAT_DATA = [{
	cat_id: '0045',
	cat_name: '家居',

}, {

	cat_id: '0077',
	cat_name: '玩乐',

}, {

	cat_id: '0082',
	cat_name: '餐厨',

}, {

	cat_id: '0092',
	cat_name: '美食',

}, {

	cat_id: '0062',
	cat_name: '文具',

}, {

	cat_id: '0069',
	cat_name: '数码',

}, {

	cat_id: '0141',
	cat_name: '配饰',

}, {

	cat_id: '0154',
	cat_name: '美护',

}, {

	cat_id: '0166',
	cat_name: '出行',

}, {

	cat_id: '0182',
	cat_name: '图书',

}, {

	cat_id: '0214',
	cat_name: '艺术',

}, {

	cat_id: '0279',
	cat_name: '水具',

}, {

	cat_id: '0358',
	cat_name: '运动',

}, {

	cat_id: '0112',
	cat_name: '服装',

}, {

	cat_id: '0129',
	cat_name: '鞋包',
}, ];

// 导航栏业务
(function() {
	let oSubnav = document.querySelector('.subnav');
	let oSubnavList = document.querySelector(".subnav_list");

	// 页面打开就请求数据
	yzb.ajax({
		url: BASE_URL + '/api_cat',
		success(res) {
			// 验证请求结果
			if (res.code != 0) {
				console.log(res);
				return;
			};
			// 想要的的结果
			let data = res.data;

			let str = '';
			data.forEach(item => {
				str += `
				<li cat-id="${item.cat_id}">
					<a href="classify.html?catId=${item.cat_id}&catName=${item.cat_name}">
						<img src="${item.cat_img}" alt=""/>
						<p>${item.cat_name}</p>
					</a>
				</li>
			`
			})
			// 添加到对应结构
			oSubnavList.innerHTML = str;

			// 添加li标签
			// 第一排
			let oEighthLi = document.querySelector('.subnav_list li:nth-of-type(8)');
			let liE = document.createElement('li');
			liE.className = 'nullNodeE';
			oSubnavList.insertBefore(liE, oEighthLi);

			// 第二排
			let oSixteenLi = document.querySelector('.subnav_list li:nth-of-type(16)');
			let liS = document.createElement('li');
			oSubnavList.insertBefore(liS, oSixteenLi);
			liS.className = 'nullNodeS';

			// 最后一排
			let liL = document.createElement('li');
			oSubnavList.appendChild(liL);
			liL.className = 'nullNodeL';

			// 获取小分类的数据
			yzb.ajax({
				url: BASE_URL + '/api_classify',
				success(res) {
					if (res.code != 0) {
						console.log(res);
						return;
					};
					let classifyAll = res.data;
					// 子菜单交互 封装
					let aLi = document.querySelectorAll('.subnav_list>li');

					// 批量监听事件
					aLi.forEach(item => {
						let strE = '';
						let strS = '';
						let strL = '';
						// 鼠标移入
						item.onmouseenter = function() {
							let strAll = '';
							okArr = classifyAll.filter(item1 => {
								// 验证移入哪一个
								return item1.cat_id == this.getAttribute('cat-id')
							});
							// 去除空值
							let strArr = okArr[0].data;
							// 数据渲染
							strArr.forEach(item2 => {
								strAll += `
								<a href="javascript:;">
									${item2.product_content}
								</a>
								`;
							});

							// 设置大导航类的高
							oSubnav.style.height = '400px';

							// 判断移入第几排的li
							if (this.getAttribute('cat-id') == '0045' || this.getAttribute('cat-id') == '0077' ||
								this.getAttribute('cat-id') == '0082' || this.getAttribute('cat-id') == '0092' ||
								this.getAttribute('cat-id') == '0062' || this.getAttribute('cat-id') == '0069' ||
								this.getAttribute('cat-id') == '0141') {
								liE.innerHTML = strAll;
								liE.style.display = 'block';
							} else if (this.getAttribute('cat-id') == '0154' || this.getAttribute('cat-id') ==
								'0166' ||
								this.getAttribute('cat-id') == '0182' || this.getAttribute('cat-id') == '0214' ||
								this.getAttribute('cat-id') == '0279' || this.getAttribute('cat-id') == '0358' ||
								this.getAttribute('cat-id') == '0112') {
								liS.innerHTML = strAll;
								liS.style.display = 'block';
							} else if (this.getAttribute('cat-id') == '0129') {
								liL.innerHTML = strAll;
								liL.style.display = 'block';
							};
						}

						// 鼠标移出
						item.onmouseleave = function() {

							liE.onmouseenter = function() {
								this.style.display = 'block';
							}
							liS.onmouseenter = function() {
								this.style.display = 'block';
							}
							liL.onmouseenter = function() {
								this.style.display = 'block';
							}
							liE.style.display = "none";
							liS.style.display = "none";
							liL.style.display = "none";

						};


					});
				}
			})
		}
	});
})();

// 搜索业务
(function() {
	let oSearchValue = document.querySelector('.search-value');
	let oSearchBtn = document.querySelector('.search-btn');
	
	let keyWord = '';
	
	// 监听关键字
	oSearchValue.onchange = function() {
		keyWord = this.value;
	}
	// 点击搜索
	oSearchBtn.onclick = function() {
		if(oSearchValue.value.length <= 0){
			alert('搜索为空');
			return;
		};
		location.href = `searchShop.html?keyWord=${encodeURIComponent(keyWord)}`
	}
	
})();

// 返回顶部业务
(function() {
	let oBackBtn = document.querySelector(".back-btn");

	// 监听页面卷动事件
	document.onscroll = function() {
		let scrollTop = document.documentElement.scrollTop;
		let isShow = scrollTop >= 400 ? 'block' : 'none';
		oBackBtn.style.display = isShow;
	};

	// 点击事件
	oBackBtn.onclick = function() {
		window.scrollTo({
			top: 0,
			behavior: 'smooth'
		});
	};
})();